<template>
  <div class="flex h-full gap-2 flex-col library relative">
    <CardHead></CardHead>
    <CardVue></CardVue>
    <a-modal v-model:visible="showLibraryForm" :footer="false">
      <FormVue></FormVue>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { DICT_ENUM } from "@/enum/dict.enum";

import { getOptions } from "@/data/options/options.actions";
import CardVue from "./card/Card.vue";
import CardHead from "./card/CardHead.vue";
import { showLibraryForm } from "./data/form";
import { getMaterialCategory, typeOptions } from "./data/options";
import FormVue from "./form/Form.vue";

onMounted(async () => {
  typeOptions.value = await getOptions(DICT_ENUM.MATERIAL_TYPE, "素材库");
  getMaterialCategory();
});
</script>

<style lang="scss" scoped>
:deep(.arco-card-header) {
  border: none;
}

:deep(.arco-badge) {
  z-index: 0;
}
</style>
